<template>
  <div style="height: 100%">
  </div>
</template>

<script>
import Format from '@/utils/format'
import EchartsMixins from '../echarts.mixins'

export default {
  mixins: [EchartsMixins],
  data() {
    return {
      charts: '',
      xList: [],
      yList: [],
      dataList: [],
      yName: '北向',
      yName2: '南向',
      xName: '东向',
      xName2: '西向',
      // 监测点名称
      name: '',
    }
  },
  computed: {
    options() {
      let that = this
      return {
        title: {
          text: this.name,
          x: 'left',
        },
        grid: {
          left: '50px',
          right: '50px',
          bottom: '20px'
        },
        legend: [
          {
            selectedMode: false,
            y: 'top',
            x: 'right',
            padding: [30, 0, 0, 0],
            itemWidth: 26,
            data: [{
              name: '开始',
              icon: "circle",
              itemStyle: {
                color: '#26e113'
              }
            },
              {
                name: '结束',
                icon: "circle",
                itemStyle: {
                  color: '#f92e02'
                }
              }],
          },

        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            label: {
              backgroundColor: '#505765'
            }
          },
          formatter: (params, ticket, callback) => {
            var contentArr = []
            for (var i = 0; i < params.length; i++) {
              var data = params[i]
              contentArr.push(Format(new Date(data.value[2])))
              let yName = data.value[1] > 0 ? that.yName : that.yName2
              let xName = data.value[0] > 0 ? that.xName : that.xName2
              contentArr.push(yName + '：' + data.value[1] + 'mm')
              contentArr.push(xName + '：' + data.value[0] + 'mm')
            }
            let remark = params[0]?.data?.remark || ''
            remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
            return contentArr.join('<br/>')
          },
        },
        dataZoom: [
          {
            show: true,
            type: 'inside',
            filterMode: 'none',
            xAxisIndex: [0],
            startValue: -20,
            endValue: 20
          },
          {
            show: true,
            type: 'inside',
            filterMode: 'none',
            yAxisIndex: [0],
            startValue: -20,
            endValue: 20
          }
        ],
        xAxis: {
          name: this.xName,
          type: 'value',
          min: function (value) {
            if (Math.abs(value.min) > Math.abs(value.max)) {
              return -(Math.ceil(Math.abs(value.min) + 3))
            }
            return -(Math.ceil(value.max) + 3);//向上取整
          },
          max: function (value) {
            if (Math.abs(value.min) > Math.abs(value.max)) {
              return Math.ceil(Math.abs(value.min) + 3)
            }
            return Math.ceil(value.max + 3);//向上取整
          },
        },
        yAxis: {
          name: this.yName,
          type: 'value',
          min: function (value) {
            if (Math.abs(value.min) > Math.abs(value.max)) {
              return -(Math.ceil(Math.abs(value.min) + 3))
            }
            return -(Math.ceil(value.max) + 3);//向上取整
          },
          max: function (value) {
            if (Math.abs(value.min) > Math.abs(value.max)) {
              return Math.ceil(Math.abs(value.min) + 3)
            }
            return Math.ceil(value.max + 3);//向上取整
          },
        },
        series: [
          {
            type: 'line',
            clip: true,
            data: this.dataList,
            symbol: 'triangle',
            smooth: true,
            symbolSize: 10,
            lineStyle: {
              color: '#73df6c',
              width: 1,
              type: 'dashed'
            },
            itemStyle: {
              borderWidth: 1,
              color: 'rgb(84,112,198)'
            },
            markPoint: {
              symbolSize: 30,
              data: [
                {
                  name: '开始',
                  coord: this.dataList[0],
                  itemStyle: {
                    color: '#26e113'
                  }
                },
                {
                  name: '结束',
                  coord: this.dataList[this.dataList.length - 1],
                  itemStyle: {
                    color: '#f92e02'
                  }
                },
              ],

            },
          },
          {
            name: '开始',
            type: 'bar',
            barWidth: '60%',
            data: [0],
            itemStyle: {
              normal: {
                color: '#26e113',
              }
            }
          },
          {
            name: '结束',
            type: 'bar',
            barWidth: '60%',
            data: [0],
            itemStyle: {
              normal: {
                color: '#f92e02',
              }
            }
          }
        ]
      }
    }
  },

  methods: {
    echartResize() {
      this.charts.resize()
    },
    updateEchart(xList, yList, name, xName, yName, xName2, yName2) {
      this.xList = xList;
      this.yList = yList;
      this.name = name;
      this.xName = xName;
      this.xName2 = xName2;
      this.yName = yName;
      this.yName2 = yName2;
      let dataList = []
      for (let i = 0; i < this.xList.length; i++) {
        dataList.push([this.xList[i][1], this.yList[i][1], this.xList[i][0]])
      }
      this.dataList = dataList;
      this.initEcharts()
      this.charts.setOption(this.options)
      this.echartResize()
    },
  },
}
</script>
